<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/bootstrap.min.css">
		<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="./css/mycss.css">
		<script type="text/javascript"src="./js/myjs.js"></script>
		<script type="text/javascript"src="./js/jquery-ui-1.10.4.custom.js"></script>
		<title>VGEE.cn</title>


	</head>

	<body class="">
		<div class="head">


			<div class ="head1">

			<li class="back">
		        <a href="index.html"><span class="glyphicon glyphicon-backward"></span></a>
		    </li>
			    <ul class="nav nav-pills nav-pills-left" id="head">
			        <li class="active" id="li1" data-toggle="tooltip" data-placement="bottom" title data-original-title="欢迎戳这里！么么哒！！！"><a href="home.php">主页</a></li>
			        <li id="li2" data-toggle="tooltip" data-placement="bottom" title data-original-title="这里有好看的照片"><a href="daily.php">景</a></li>
			        <li id="li3"  data-toggle="modal"  data-placement="bottom" data-target="#myModal" title data-original-title="点这里给我留言"><a href="#">留言</a></li>
			    	<button id="test">xxx</button>
			    </ul>

			    <!-- Modal -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					  <div class="modal-dialog">
					    <div class="modal-content">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					        <h4 class="modal-title" id="myModalLabel">Hello</h4>
					      </div>
					      <div class="modal-body">
					        想给我留言可以直接发送邮件到admin@vgee.cn 谢谢你的关注~
					      </div>
					      <div class="modal-footer">
					        <button id="close1" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
					      </div>
					    </div><!-- /.modal-content -->
					  </div><!-- /.modal-dialog -->
					</div><!-- /.modal -->

				<div>
					<div class="container inn">

				     	<h1 class="face" style="margin-top: 0px;">Welcome to <b>vGee</b></h1>
				    </div>


		    	</div>
	    	</div>
			     	<h1 class="down" ><b>V</b><sup class="in"><b>——————————</b></sup></h1>
	    </div>
	    <div class="mid">
	    	<h2 id="contact" data-toggle="tooltip" data-placement="top" title data-original-title="点这里与我QQ联系O(∩_∩)O"><a  class="none" href="tencent://message/?uin=610164407&Menu=yes" >Contact me<img src="./pic/qq.png" width="29px"></a></h2>

	    </div>
	    <div class="container" >
	    <div class="row">
		    <div class="col-md-3">
	          <div class="bs-sidebar hidden-print affix-top" role="complementary">
	            <ul class="nav bs-sidenav">
					                      
					<li class="active">
					  <a href="#glyphicons">Glyphicons图标</a>
					  <ul class="nav">
					    <li class=""><a href="#glyphicons-glyphs">可用的图标</a></li>
					    <li><a href="#glyphicons-how-to-use">如何使用</a></li>
					    <li><a href="#glyphicons-examples">案例</a></li>
					  </ul>
					</li>
					<li>
					  <a href="#dropdowns">下拉菜单</a>
					  <ul class="nav">
					    <li><a href="#dropdowns-example">案例</a></li>
					    <li><a href="#dropdowns-alignment">对齐选项</a></li>
					    <li><a href="#dropdowns-headers">标题</a></li>
					    <li><a href="#dropdowns-disabled">禁用的菜单项</a></li>
					  </ul>
					</li>
					<li>
					  <a href="#btn-groups">按钮组</a>
					  <ul class="nav">
					    <li><a href="#btn-groups-single">基本案例</a></li>
					    <li><a href="#btn-groups-toolbar">按钮工具栏</a></li>
					    <li><a href="#btn-groups-sizing">尺寸</a></li>
					    <li><a href="#btn-groups-nested">嵌套</a></li>
					    <li><a href="#btn-groups-vertical">垂直排列</a></li>
					    <li><a href="#btn-groups-justified">两端对齐的链接排列</a></li>
					  </ul>
					</li>
					<li>
					  <a href="#btn-dropdowns">按钮式下拉菜单</a>
					  <ul class="nav">
					    <li><a href="#btn-dropdowns-single">单按钮下拉菜单</a></li>
					    <li><a href="#btn-dropdowns-split">分裂式按钮下拉菜单</a></li>
					    <li><a href="#btn-dropdowns-sizing">尺寸</a></li>
					    <li><a href="#btn-dropdowns-dropup">向上弹出式菜单</a></li>
					  </ul>
					</li>
					<li>
					  <a href="#input-groups">输入框组</a>
					  <ul class="nav">
					    <li><a href="#input-groups-basic">基本案例</a></li>
					    <li><a href="#input-groups-sizing">尺寸</a></li>
					    <li><a href="#input-groups-checkboxes-radios">复选框与单选框</a></li>
					    <li><a href="#input-groups-buttons">附加按钮</a></li>
					    <li><a href="#input-groups-buttons-dropdowns">带下拉菜单的按钮</a></li>
					    <li><a href="#input-groups-buttons-segmented">分段按钮</a></li>
					  </ul>
					</li>
					<li class="">
					  <a href="#nav">导航</a>
					  <ul class="nav">
					    <li class=""><a href="#nav-tabs">标签页</a></li>
					    <li class=""><a href="#nav-pills">胶囊式标签页</a></li>
					    <li class=""><a href="#nav-justified">两端对齐的导航</a></li>
					    <li class=""><a href="#nav-disabled-links">禁用的链接</a></li>
					    <li class=""><a href="#nav-dropdowns">使用下拉菜单</a></li>
					  </ul>
					</li>
					<li class="">
					  <a href="#navbar">导航条</a>
					  <ul class="nav">
					    <li class=""><a href="#navbar-default">默认的导航条</a></li>
					    <li class=""><a href="#navbar-forms">表单</a></li>
					    <li class=""><a href="#navbar-buttons">按钮</a></li>
					    <li class=""><a href="#navbar-text">文本</a></li>
					    <li class=""><a href="#navbar-links">非导航的链接</a></li>
					    <li class=""><a href="#navbar-component-alignment">组件对齐</a></li>
					    <li class=""><a href="#navbar-fixed-top">固定在顶部</a></li>
					    <li class=""><a href="#navbar-fixed-bottom">固定在底部</a></li>
					    <li class=""><a href="#navbar-static-top">静止在顶部</a></li>
					    <li class=""><a href="#navbar-inverted">反色的导航条</a></li>
					  </ul>
					</li>
					<li class=""><a href="#breadcrumbs">面包屑导航</a></li>
					<li class="">
					  <a href="#pagination">分页</a>
					  <ul class="nav">
					    <li class=""><a href="#pagination-default">默认分页</a></li>
					    <li class=""><a href="#pagination-pager">翻页</a></li>
					  </ul>
					</li>
					<li class=""><a href="#labels">标签</a></li>
					<li class=""><a href="#badges">徽章</a></li>
					<li class=""><a href="#jumbotron">大屏幕介绍</a></li>
					<li class=""><a href="#page-header">页面标题</a></li>
					<li class="">
					  <a href="#thumbnails">缩略图</a>
					  <ul class="nav">
					    <li class=""><a href="#thumbnails-default">默认案例</a></li>
					    <li class=""><a href="#thumbnails-custom-content">定制内容</a></li>
					  </ul>
					</li>
					<li class="">
					  <a href="#alerts">警告框</a>
					  <ul class="nav">
					    <li class=""><a href="#alerts-examples">案例</a></li>
					    <li class=""><a href="#alerts-dismissable">可关闭的警告框</a></li>
					    <li class=""><a href="#alerts-links">警告框中的链接</a></li>
					  </ul>
					</li>
					<li class="">
					  <a href="#progress">进度条</a>
					  <ul class="nav">
					    <li class=""><a href="#progress-basic">基本案例</a></li>
					    <li class=""><a href="#progress-alternatives">有意义的替换</a></li>
					    <li><a href="#progress-striped">条纹效果</a></li>
					    <li><a href="#progress-animated">运动效果</a></li>
					    <li><a href="#progress-stacked">堆叠效果</a></li>
					  </ul>
					</li>
					<li>
					  <a href="#media">媒体对象</a>
					  <ul class="nav">
					    <li><a href="#media-default">默认媒体</a></li>
					    <li><a href="#media-list">媒体列表</a></li>
					  </ul>
					</li>
					<li>
					  <a href="#list-group">列表组</a>
					  <ul class="nav">
					    <li><a href="#list-group-basic">基本案例</a></li>
					    <li><a href="#list-group-badges">徽章</a></li>
					    <li><a href="#list-group-linked">链接条目</a></li>
					    <li><a href="#list-group-custom-content">定制内容</a></li>
					    <li><a href="#list-group-custom-content">定制内容</a></li>
					  </ul>
					</li>
					<li>
					  <a href="#panels">面版</a>
					  <ul class="nav">
					    <li><a href="#panels-basic">基本案例</a></li>
					    <li><a href="#panels-heading">带标题的面版</a></li>
					    <li><a href="#panels-alternatives">有意义的替换</a></li>
					    <li><a href="#panels-tables">带表格的面版</a>
					    </li><li><a href="#panels-list-group">带列表组的面版</a>
					  </li></ul>
					</li>
					<li><a href="#wells">Well</a></li>

					                          
		            </ul>
		          </div>
		        </div>
	    <!-- <div class="first-line" id="row1">
                <div id=""class="col col-xs-4" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. right?">
                    <img  src="https://d1hjm33yswheja.cloudfront.net/img/home-send.png" alt="share">
                    <h4><b>分享</b></h4>
                    <p>分享生活，分享感动。</p>
                </div>
                <div class="col col-xs-4">
                    <img src="https://d1hjm33yswheja.cloudfront.net/img/home-know.png" alt="share">
                    <h4><b>记录</b></h4>
                    <p>记录时光，收藏美好。</p>
                </div>
                <div class="col col-xs-4">
                    <img src="https://d1hjm33yswheja.cloudfront.net/img/home-grow.png" alt="share">
                    <h4><b>成长</b></h4>
                    <p>追逐梦想，勇往直前。</p>
                </div>
            </div>

            <div class="switch">
            <li class="switch-li">
		        <span id="gl-row" class="glyphicon glyphicon-circle-arrow-up"></span>
      		</li>
            </div> -->
            <div class="col-md-9">
				<div id="row2" class="hold">
					<div><h2 class="title">近期日志</h2></div>
					<div class="panel-group col-md-12" id="accordion">
					  <div class="panel panel-default r1">
					    <div class="panel-heading rh1">
					      <h4 class="panel-title">
					        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#row2collapseOne">
					          关于vGee.cn
					        </a>
					      </h4>
					    </div>
					    <div id="row2collapseOne" class="panel-collapse collapse in">
					      <div class="panel-body">
					      <p>
					      		这是我自己制作的第二个个人网站，为了提高自己对HTML,CSS,JS的驾驭能力，全部采用手打的方式编写，并且使用了BOOTSTRAP样式.
					      		并且极力的使用各种简洁的元素，大量的色块和扁平元素，打造出一个极简的风格。不过由于是第一次尝试这么多元素，控件组合在一起
					      		手法显得很拙劣，不过我会在不断地学习中摸索着前进，对这个网站进行不断的改进。将新学到的东西及时的添加到这个网站中来，
					      		希望这个网站能够记录我的成长的过程，并且不断地完善，进步。达到一个令人满意的境地。
					      </p>
					      <p><small>JailBreak</small></p>

					      </div>
					    </div>
					  </div>

					  <div class="panel panel-default r2">
					    <div class="panel-heading rh2">
					      <h4 class="panel-title">
					        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#row2collapseTwo">
					          Don't do what others do.
					        </a>
					      </h4>
					    </div>
					    <div id="row2collapseTwo" class="panel-collapse collapse">
					      <div class="panel-body">
					      <p>
		一个人奋斗的意义在哪里？是丰裕的物质生活亦是呼风唤雨的高贵权利？我觉得一个人经历过无数风雨，历练过十载年华最终还是为了自己喜欢的生活。一个人只有自己才知道自己喜欢什么。无论富贵贫贱，只要自己觉得快乐。就是最好的。一个人能纯粹的为了自己的爱好而奋斗，这才是最美不过的。喜欢什么就去做什么，不必这么在乎别人的看法。我们不是为了别人活着。所以不要总是做别人做的事。说别人说的话。
	    <br/>别人上学我也上学，别人读初中我也读初中，别人读高中我也读高中，别人上大学我也上大学。现在是时候为自己做一点事情了。做自己喜欢做的事情，一直坚持下去。就算很苦，就算很累，so what? 凌晨三点又何妨？熬夜又何妨？我是在为自己活着。
	    <br/>看看我欣赏的每一个人，Steve Jobs, Mark Zurkerberg, Dandy Weng, Zealer, 谁又不是整天做着自己热爱的东西，谁又不是坚持自己的道路无视别人在干什么。
	    <br/>也许现在我还有很多事情不敢做，这个世界有一堵又一堵的墙壁，如果绕着走，会走很多很多的弯路，做很多很多没用的事情。当然破开墙壁是要付出代价的，但是只有这样，才能一如既往，才能勇往直前。自己喜欢的事情，就一定要做到极致。


	                                                                        <br/>——不要仰望别人，自己亦是风景。
					    </p>
					    </div>
					  </div>
					  </div>
					  <div class="panel panel-default r3">
					    <div class="panel-heading rh3">
					      <h4 class="panel-title">
					        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#row2collapseThree">
					          loading...
					        </a>
					      </h4>
					    </div>
					    <div id="row2collapseThree" class="panel-collapse collapse">
					      <div class="panel-body">
					      <p>...</p>
					      </div>
					    </div>
					  </div>
					</div>

				</div>
				<div id="row3" class="hold">
					<div><h2 class="title">近期照片</h2></div>
					<div class="panel-group col-md-12" id="accordion">
					  <div class="panel panel-default r1">
					    <div class="panel-heading rh1">
					      <h4 class="panel-title">
					        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#row3collapseOne">
					          萌物
					        </a>
					      </h4>
					    </div>
					    <div id="row3collapseOne" class="panel-collapse collapse in">
					      <div class="panel-body">
					       <div class="row">
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #animal" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/11a.jpg">
					          </a>
					        </div>
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #animal" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/12a.jpg">
					            </a>
					        </div>
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #animal" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/13a.jpg">
					            </a>
					        </div>
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #animal" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/14a.jpg">
					            </a>
					        </div>
	     			 		</div>


					      </div>
					    </div>
					  </div>
					  <div class="panel panel-default r2">
					    <div class="panel-heading rh2">
					      <h4 class="panel-title">
					        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#row3collapseTwo">
					          人像
					        </a>
					      </h4>
					    </div>
					    <div id="row3collapseTwo" class="panel-collapse collapse">
					      <div class="panel-body">
					       
					      	<div class="row">
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #people" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/p1.jpg">
					          </a>
					        </div>
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #people" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/p6.jpg">
					            </a>
					        </div>
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #people" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/p3.jpg">
					            </a>
					        </div>
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #people" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/p4.jpg">
					            </a>
					        </div>
	     			 		</div>

					      </div>
					    </div>
					  </div>
					  <div class="panel panel-default r3">
					    <div class="panel-heading rh3">
					      <h4 class="panel-title">
					        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#row3collapseThree">
					          美景
					        </a>
					      </h4>
					    </div>
					    <div id="row3collapseThree" class="panel-collapse collapse">
					      <div class="panel-body">
					        
					      	<div class="row">
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #photograph" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/red_leaves.jpg">
					          </a>
					        </div>
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #photograph" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/moon.jpg">
					            </a>
					        </div>
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #photograph" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/house.jpg">
					            </a>
					        </div>
					        <div class="col-xs-6 col-md-3">
					          <a href="daily.php #photograph" class="thumbnail">
					            <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block; " src="./pic/little_toy.jpg">
					            </a>
					        </div>
	     			 		</div>

					      </div>
					    </div>
					  </div>
					</div>

				</div>

        	</div>
		</div><!-- row -->
	    </div><!--container -->




	</body>






</html>